<template>
    <div>
        <el-button type="primary" @click="addJump">添加</el-button>
        <el-button type="warning" @click="editJump">修改</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>

        <el-row :gutter="20">
            <el-col :span="4"
                ><div class="grid-content bg-purple">
                    <el-tree
                        style="margin-top: 20px"
                        :data="treeData"
                        ref="tree"

                        node-key="Id"
                        :props="{ label: 'Name', children: 'children' }"
                    >
                    </el-tree></div
            ></el-col>
            <el-col :span="20"
                ><div class="grid-content bg-purple">
                    <el-table :data="treeData" style="width: 100%; margin-bottom: 20px"  ref="tree" row-key="Id" border default-expand-all>
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column prop="Name" label="部门名称" width="180"> </el-table-column>
                        <el-table-column prop="Id" label="部门ID" width="180"> </el-table-column>
                        <el-table-column prop="Describe" label="部门描述" width="180"> </el-table-column>
                        <el-table-column prop="Principal" label="负责人" width="180"> </el-table-column>
                        <el-table-column prop="OrderSort" label="排序值" sortable width="180"> </el-table-column>
                        <el-table-column prop="IsEnable" label="状态"> </el-table-column>
                    </el-table></div
            ></el-col>
        </el-row>
        <!--添加/修改部门-->
        <el-dialog title="fromTitle" :visible.sync="formVisible">
            <el-form :model="form">
                <el-form-item label="部门名称" label-width="120px">
                    <el-input v-model="form.Name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级部门" label-width="120px">
                    <el-cascader
                        :options="treeData"
                        v-model="form.LayerIds"
                        :props="{ label: 'Name', value: 'Id', checkStrictly: true }"
                        clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="负责人" label-width="120px">
                    <el-input v-model="form.Principal" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门描述" label-width="120px">
                    <el-input type="textarea" v-model="form.Describe"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="formVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>



<script>
import { AddDepartment, DepartmentQuery,departmentXianShi, UpdateDepartment, DeleteDepartment } from '@/api/Department.js';
export default {
    data() {
        return {
            treeData: [],
            formVisible: false,
            form: {},
            Departmentshow: [],
            fromTitle: '',
            data: [
                {
                    label: 'Id',
                    children: 'children'
                }
            ],
            data1: []
        };
    },
    created() {
        this.getTreeData();
        this.show()
    },
    methods: {
        //删除方法
        handleDelete() {
            let ids = [];
            //拼接ID集合
            this.multipleSelection.forEach(e => {
                ids.push(e.Id)
            });

            //判断长度
            if(ids.length==0){
                this.$message.warning('请至少选择一项！！！');
                return ;
            }

            let param = { id: this.multipleSelection[0].Id };

            this.$confirm('你确定要删除吗', '提示', {})
                .then(() => {
                    DeleteDepartment(param).then((res) => {
                        if (res.Code == 200) {
                            this.$message.success(res.Message);
                            this.getTreeData();
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                })
                .catch(() => this.$message.info('已取消删除'));
        },
        //修改方法
        handleEdit() {
            //判断是否存在父级结点
            if (this.form.LayerIds == undefined) {
                //不存在则说明该结点就是最高级结点
                this.form.Pid = 0;
                this.form.LayerIds = 0;
            } else {
                this.form.Pid = this.form.LayerIds[this.form.LayerIds.length - 1];
                this.form.LayerIds = this.form.LayerIds.toString();
            }
            UpdateDepartment(this.form).then((res) => {
                if (res.Code == 200) {
                    this.$message.success(res.Message);
                    this.getTreeData();
                    this.formVisible = false;
                } else {
                    this.$message.error(res.Message);
                }
            });
        },
        //修改弹出
        editJump() {
            //判断是否存在多选框是否有被选中的
            if (this.multipleSelection == null) {
                this.$message.warning('请选择一项再进行修改');
                return;
            } else if (this.multipleSelection.length != 1) {
                this.$message.warning('只能选择一项部门信息进行修改');
                return;
            }
            this.form = this.multipleSelection[0];
            this.fromTitle = '修改部门';
            this.formVisible = true;
        },
        //查询方法
        getTreeData() {
            DepartmentQuery().then((res) => {
                console.log(res)
                this.treeData = res.Data;
            });
        },
         //显示方法
        show() {
            departmentXianShi().then((res) => {
                //console.log(res)
                this.data = res.data;
            });
        },
        //判断是添加还是修改
        handleConfirm() {
            if (this.fromTitle == '修改部门') {
                this.handleEdit();
            } else {
                this.handleAdd();
            }
        },
        //添加弹出方法
        addJump() {
            this.form = {};
            this.formVisible = true;
            this.fromTitle = '添加部门';
        },
        //添加连接后台
        handleAdd() {
            //判断是否存在父级结点
            if (this.form.LayerIds == undefined) {
                //不存在则说明该结点就是最高级结点
                this.form.Pid = 0;
                this.form.LayerIds = 0;
            } else {
                this.form.Pid = this.form.LayerIds[this.form.LayerIds.length - 1];
                this.form.LayerIds = this.form.LayerIds.toString();
            }
            //console.log(this.form)
            AddDepartment(this.form).then((res) => {
                if (res.Code == 200) {
                    this.$message.success(res.Message);
                    this.getTreeData();
                    this.formVisible = false;
                } else {
                    this.$message.error(res.Message);
                }
            });
        },
        //多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
            //console.log(this.multipleSelection)
        }
    }
};
</script>
